
<template>
	<view class="page">
		<mescroll-uni @init="mescrollInit" :top="140" @down="downCallback" :downOption="downOption" :up="upOption" @up="upCallback"
			@emptyclick="emptyClick">
			<!-- 客户的数据 -->
			<view class="kuHu">
				<view class="vitems tow" v-for="data in kuHuList" @click="details(data.id)">
					<view class="items_leftImg" style="margin-left: 22rpx;">
						<img src="@/static/ke_hu/shou.png" alt="" style="width: 100%;height: 100%;">
					</view>
					<view class="vitems_right" style="justify-content: flex-start;">
						<view class="vitems_right_t">
							<view class="s">
								<span>客户：{{data.name || ''}}</span>
							</view>
							<span style=" font-size: 20rpx;color: #9E9E9E;">{{data.createTime}}</span>
						</view>
						<view class="vitems_right_b">
							<span>订单状态：{{data.apply}}</span>
						</view>
						<view v-if="data.audit!=null" class="items_right_b">
							<span>审核状态：{{data.audit}}</span>
						</view>
						<view class="vitems_right_b" @click.stop="$PhoneCall(data.account)">
							<span class="line">电话：{{ data.account || ''}}</span>
						</view>
						<view class="vitems_right_b">
							<span>经销商：{{data.dealerName || ''}}
							</span>
						</view>
						<view class="vitems_right_b">
							<span>门店：{{data.storeName || ''}}
							</span>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		props:{
			orgId:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				regionOrgId: null,
				kuHuList: [],
				keyword:'',
				duIndex: 0,
				upOption: {
					auto: false,//是否在初始化完毕之后自动执行上拉拉刷新的回调; 默认true
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
				},
				downOption: {
						// use: false, // 是否启用下拉刷新; 默认true
						auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				top: "24rpx",
				pager: {
					currentPage: 1,
					maxResultCount: 10
				},
			}
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.pager.currentPage = page.num; //在第几页
				this.pager.maxResultCount = page.size; //展示多少条数据
				this.getKeHu()
			},
			downCallback(page) { // 下拉刷新
				this.mescroll.resetUpScroll();
			},
			// 获取客户数据
			async getKeHu() {
				const res = await this.$post(`/biz/statistics/kehupaihang`, {
					current: this.pager.currentPage,
					size: this.pager.maxResultCount,
					sercherWord: this.keyword,
					orgId:this.orgId
				})

				if (res.data.data.total >= 0) {
					if (this.pager.currentPage == 1) {
						this.kuHuList = []
					}
					this.kuHuList = this.kuHuList.concat(res.data.data.records)
				}
				this.mescroll.endBySize(res.data.data.records.length, res.data.data.total)
			},
			// 查看订单详情
			details(id) {
				uni.navigateTo({
					url: '/pages/xiao_shou_duan/ding_dan_xiang_qing?id=' + id
				})
			},
		}
	}
</script>

<style>
	.page {
		overflow-y: auto;
		width: 100%;
		/* height: 100vh; */
		background-color: #fff;
		/* padding-bottom: 26rpx; */
	}

	.tops {
		width: 706rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
		font-weight: bold;
		color: #333333;
		line-height: 33rpx;
		margin: 30rpx auto 0;
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 706rpx;
		height: 139rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 48rpx 1rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 26rpx auto 0;
		/* background-color: chocolate; */
	}

	.items_left {
		width: 87rpx;
		height: 87rpx;
		background: #F89751;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 26rpx 0 26rpx;
		font-size: 50rpx;
		font-family: 'FZZongYi-M05S-Regular, FZZongYi-M05S';
		font-weight: 400;
		color: #FFFFFF;
		line-height: 87rpx;
		text-align: center;
	}

	.items_right {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		width: 527rpx;
		height: 100%;
		/* background-color: red; */
	}

	.items_right_b {
		margin-top: 14rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9E9E9E;
		line-height: 33rpx;
	}

	.items_right_t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 37rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #27292C;
		line-height: 37rpx
	}

	.chengSe {
		background-color: #F89751;
	}

	.lvSe {
		background-color: #31AB3F;
	}

	.hongSe {
		background-color: #FB5951;
	}

	.heiSe {
		background-color: #361B32;
	}

	.ziSe {
		background-color: #6947DE;
	}

	.banner_right {
		padding: 0 11rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		/* width: 690rpx; */
		height: 90rpx;
		/* background: #F2F2F2; */
		/* border-radius: 12rpx 12rpx 12rpx 12rpx; */
		/* margin-top: 32rpx; */
		margin: 0 auto 0;
		border-bottom: 2rpx solid #eee;
	}

	.banner_right_items {
		text-align: center;
		width: 204rpx;
		height: 100%;

		/* border-radius: 12rpx 12rpx 12rpx 12rpx; */
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #202122;
		line-height: 68rpx;
	}

	.jisn {
		/* background: #FFFFFF; */
		/* box-shadow: 0rpx 4rpx 5rpx 1rpx rgba(0, 0, 0, 0.06); */
		color: #5885F9;
		border-bottom: 3rpx solid #5885F9;
	}

	.search {
		padding: 0 36rpx;
		box-sizing: border-box;
	}

	.vitems {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 706rpx;
		/* height: 159rpx; */
		padding: 20rpx 0;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 48rpx 1rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 26rpx auto 0;
		/* background-color: chocolate; */
	}

	.vitems_left {
		width: 99rpx;
		height: 99rpx;
		background: #F89751;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 26rpx 0 26rpx;
		font-size: 50rpx;
		font-family: 'FZZongYi-M05S-Regular, FZZongYi-M05S';
		font-weight: 400;
		color: #FFFFFF;
		line-height: 87rpx;
		text-align: center;
	}

	.vitems_right {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		width: 527rpx;
		height: 100%;
		/* background-color: red; */
	}

	.vitems_right_b {
		margin-top: 11rpx;
		/* height: 29rpx; */
		font-size: 21rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #858585;
		line-height: 29rpx;
	}

	.vitems_right_t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 37rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #27292C;
		line-height: 37rpx
	}

	.items_leftImg {
		width: 79rpx;
		height: 79rpx;
		margin: 0 26rpx 0 26rpx;
	}

	.tow {
		align-items: flex-start;
		padding-top: 16rpx;
		box-sizing: border-box;
		width: 690rpx;
		/* height: 240rpx; */
		padding: 20rpx 0;
	}
	.line {
		border-bottom:2rpx solid #5885F9;
		color: #5885F9;
	}
</style>